<script setup lang='tsx'>import { markRaw, onMounted, Ref, ref } from 'vue';
import bounce from '../../bounce.module.css'
import gsap from 'gsap'
import littleSwiper from '../NavLittleSwiper/index.vue'
import fade from '../../myFade.module.css'
import request from '../../utils/axios'

import LivePopCard from '../popCard/LiveCard/index.vue'
import GamePopCard from '../popCard/gameCard/index.vue'
import MangaPopCard from '../popCard/MangaCard/index.vue'
import DownloadPopCard from '../popCard/DownloadCard/index.vue'
import IndexPopCard from '../popCard/IndexCard/index.vue'

const indexFlag = ref(false)
const liveFlag = ref(false)
const gameFlag = ref(false)
const mangaFlag = ref(false)
const downloadFlag = ref(false)
let FlagList: {
    [k: string]: Ref<boolean>
} = {
    0: indexFlag,
    2: liveFlag,
    3: gameFlag,
    5: mangaFlag,
    8: downloadFlag
}

const navList = ref([
    {
        title: '首页',
        link: '',
        icon: 'iconfont icon-shouye',
        card: markRaw(IndexPopCard)
    },
    {
        title: '番剧',
        link: '',
    },
    {
        title: '直播',
        link: '',
        card: markRaw(LivePopCard)
    },
    {
        title: '游戏中心',
        link: '',
        card: markRaw(GamePopCard)
    },
    {
        title: '会员购',
        link: '',
    },
    {
        title: '漫画',
        link: '',
        card: markRaw(MangaPopCard)
    },
    {
        title: '赛事',
        link: '',
    },
    {
        title: 's12',
        link: '',
        component: markRaw(littleSwiper)
    },
    {
        title: '下载客户端',
        link: '',
        icon: 'iconfont icon-xiazaihuancun',
        card: markRaw(DownloadPopCard)
    },
])
const timer = ref(0)
const onMouseenter = (index: number, e: Event) => {

    Object.keys(FlagList).forEach(item => {
        FlagList[item].value = false
    })
    window.clearTimeout(timer.value)
    //显示弹窗
    if (FlagList[index]) {
        if (index === 0 && !isScroll.value) return
        timer.value = setTimeout(() => {
            FlagList[index].value = true
            if (index === 0 && isScroll.value) {
                (e.target as HTMLElement).querySelector('.arrow')?.classList.add('upside-down')
            }
        }, 300);
    }

    if (index === 0 || index === 7 || index === 8) return
    let dom: HTMLElement = e.target as HTMLElement
    dom.classList.add(bounce.animate__animated, bounce.animate__bounce)
    // gsap.to(dom, {
    //     y: '-5px',
    //     duration: .2
    // })
    // let timer = setTimeout(() => {

    //     gsap.to(dom, {
    //         y: '0',
    //         duration: '.15'
    //     })

    //     window.clearTimeout(timer)
    // }, 200);
}
const onMouseleave = (index: number, e: Event) => {
    //清除定时器
    window.clearTimeout(timer.value)
    //隐藏弹窗
    // Object.keys(FlagList).forEach(item => {
    //     FlagList[item].value = false
    // })
    if (index === 0 && isScroll.value) {
        (e.target as HTMLElement).querySelector('.arrow')?.classList.remove('upside-down')
    }
    if (index === 0 || index === 6 || index === 7) return
    let dom: HTMLElement = e.target as HTMLElement
    dom.classList.remove(bounce.animate__animated, bounce.animate__bounce)
    // gsap.to(dom, {
    //     y: '0'
    // })
}
const onPopCardLeave = (index: number) => {
    Object.keys(FlagList).forEach(item => {
        FlagList[item].value = false
    })
}
const isScroll = ref(false)
const listRef = ref<HTMLElement>()
const setScroll = (flag: boolean) => {
    isScroll.value = flag
    if (flag) {
        (listRef.value as HTMLElement).classList.add('scroll')
    } else (listRef.value as HTMLElement).classList.remove('scroll')

}

defineExpose({
    setScroll
})
</script>
<template>
    <div class="left-navBar">
        <ul class="link-list" ref="listRef">
            <li v-if="isScroll"><a href="#" class="iconfont icon-bilibili" style="font-size:27px; color:skyblue"></a>
            </li>
            <li v-for="(item,index) in navList" :key="item.title" :style="item.component?'overflow:hidden':''"
                @mouseleave="onPopCardLeave(index)">
                <span :class="item.icon?item.icon+' icon':''" v-if="index!==0||!isScroll"></span>
                <div :style="item.icon?{marginLeft: '20px'}:{}" @mouseenter.stop="onMouseenter(index, $event)"
                    @mouseleave="onMouseleave(index, $event)">
                    {{item.component?'':item.title}}
                    <span class="iconfont icon-arrow-down arrow" v-if="isScroll&&index==0"></span>
                </div>
                <component :is="item.component?item.component:''" v-if="item.component"></component>
                <Transition :enter-active-class="fade.fadeIn" :leave-active-class="fade.fadeOut">
                    <div class="pop-card-box" v-show="item.card&&FlagList[index]?.value">
                        <component :is="item.card"></component>
                    </div>
                </Transition>

            </li>
        </ul>
    </div>
</template>
<style lang='less' scoped>
.left-navBar {
    flex-shrink: 0;

    .scroll {
        color: #000 !important;
    }

    .link-list {
        display: flex;
        // width: 534px;
        font-size: 14px;
        color: white;
        font-weight: 400;
        height: 64px;
        line-height: 64px;

        li {
            display: inline-block;
            margin-right: 20px;
            cursor: pointer;
            position: relative;
            // overflow: hidden;

            .icon {
                font-size: 18px;
                position: absolute;
            }

            div {


                .arrow {
                    display: inline-block;
                    color: #000;
                    font-size: 12px;
                    // background-color: skyblue;
                    transition: all .3s ease;
                }

                .upside-down {
                    transform: rotate(180deg);
                }
            }


            .pop-card-box {
                position: absolute;
                top: 64px;
                left: -80px;
                z-index: 999;
                padding: 20px;
                display: flex;
                background-color: #fff;
                border: 1px solid var(--line-regular);
                border-radius: 8px;
                box-shadow: 0 0 30px rgba(0, 0, 0, .1);
                color: #000;
            }
        }
    }
}
</style>